<template>
    <div class="cart">
        <h4>全部商品</h4>
        <div class="cart-main">
            <div class="cart-th">
                <div class="cart-th1">全部</div>
                <div class="cart-th2">商品</div>
                <div class="cart-th3">单价（元）</div>
                <div class="cart-th4">数量</div>
                <div class="cart-th5">小计（元）</div>
                <div class="cart-th6">操作</div>
            </div>
            <div class="cart-body">
                <ul v-for="item in carList" :key="item.id" class="cart-list">
                    <li class="cart-list-con1">
                        <input v-model="item.isChecked" :false-value="0"
                               :true-value="1"
                               name="chk_list"
                               type="checkbox" @change="handleCheckCart(item)">
                    </li>
                    <li class="cart-list-con2">
                        <img :src="item.imgUrl">
                        <div class="item-msg">{{ item.skuName }}</div>
                    </li>
                    <li class="cart-list-con3">
                        <span class="price">{{ item.cartPrice }}</span>
                    </li>
                    <li class="cart-list-con4">
                        <a class="mins" @click="changeSkuNum(item,item.skuNum-1)">-</a>
                        <input :value="item.skuNum" autocomplete="off" class="itxt" minnum="1"
                               type="text" @change="changeSkuNum(item, $event)">
                        <a class="plus" @click="changeSkuNum(item,item.skuNum+1)">+</a>
                    </li>
                    <li class="cart-list-con5">
                        <span class="sum">{{ item.cartPrice * item.skuNum }}</span>
                    </li>
                    <li class="cart-list-con7">
                        <a class="sindelet" @click="handleDeleteCart(item)">删除</a>
                        <br>
                        <a href="#none">移到收藏</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="cart-tool">
            <div class="select-all">
                <input :checked="allChecked" class="chooseAll" type="checkbox"
                       @change="toggleAllChecked">
                <span>全选</span>
            </div>
            <div class="option">
                <a @click="deleteAllCheckedCart">删除选中的商品</a>
                <a href="#none">移到我的关注</a>
                <a href="#none">清除下柜商品</a>
            </div>
            <div class="money-box">
                <div class="chosed">已选择
                    <span>0</span>件商品
                </div>
                <div class="sumprice">
                    <em>总价（不含运费） ：</em>
                    <i class="summoney">0</i>
                </div>
                <div class="sumbtn">
                    <a class="sum-btn" href="###" target="_blank">结算</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" name="ShopCart" setup>
import {computed, onMounted, type Ref, ref} from "vue";
import {addCart, checkCart, deleteCart, getCartList} from "@/api/cart";

let carList: Ref<any[]> = ref([]);
onMounted(loadCartList);
const allChecked = computed(() => carList.value.every(item => item.isChecked));

/**
 * 加载购物车列表
 */
function loadCartList() {
    getCartList().then(({data}) => {
        carList.value = data.reduce((a: any[], b: any) => a.concat(b.cartInfoList), []);
    })
}

/**
 * 切换商品选中状态
 * @param item
 */
function handleCheckCart(item: any) {
    checkCart(item.skuId, item.isChecked)
}

/**
 * 全选切换
 * @param event
 */
function toggleAllChecked(event: any) {
    const value = event.target.checked * 1;
    carList.value.filter(item => item.isChecked != value)
        .forEach(item => {
            item.isChecked = value;
            checkCart(item.skuId, value)
        })
}

/**
 * 修改购物车商品数量
 * @param item
 * @param value
 */
function changeSkuNum(item: any, value: any) {
    let val = (value.target?.value || value) * 1;
    if (isNaN(val) || val < 0) {
        value.target && (value.target.value = item.skuNum);
        return;
    }
    val = parseInt(val as any);
    //计算与旧值的差值
    const addNum = val - item.skuNum;
    //更新购物车
    addCart(item.skuId, addNum).then(() => item.skuNum = val)
}

/**
 * 删除购物车
 * @param cart
 */
function handleDeleteCart(cart: any) {
    deleteCart(cart.skuId).then(loadCartList)
}

/**
 * 删除所有选中商品
 */
function deleteAllCheckedCart() {
    const promises = carList.value.filter(cart => cart.isChecked).map(cart => deleteCart(cart.skuId))

    Promise.allSettled(promises).then(loadCartList)

}
</script>

<style lang="less" scoped>
.cart {
    width: 1200px;
    margin: 0 auto;

    h4 {
        margin: 9px 0;
        font-size: 14px;
        line-height: 21px;
    }

    .cart-main {
        .cart-th {
            background: #f5f5f5;
            border: 1px solid #ddd;
            padding: 10px;
            overflow: hidden;

            & > div {
                float: left;
            }

            .cart-th1 {
                width: 25%;

                input {
                    vertical-align: middle;
                }

                span {
                    vertical-align: middle;
                }
            }

            .cart-th2 {
                width: 25%;
            }

            .cart-th3,
            .cart-th4,
            .cart-th5,
            .cart-th6 {
                width: 12.5%;

            }
        }

        .cart-body {
            margin: 15px 0;
            border: 1px solid #ddd;

            .cart-list {
                padding: 10px;
                border-bottom: 1px solid #ddd;
                overflow: hidden;

                & > li {
                    float: left;
                }

                .cart-list-con1 {
                    width: 15%;
                }

                .cart-list-con2 {
                    width: 35%;

                    img {
                        width: 82px;
                        height: 82px;
                        float: left;
                    }

                    .item-msg {
                        float: left;
                        width: 150px;
                        margin: 0 10px;
                        line-height: 18px;
                    }
                }

                .cart-list-con3 {
                    width: 10%;

                }

                .cart-list-con4 {
                    width: 17%;

                    .mins {
                        border: 1px solid #ddd;
                        border-right: 0;
                        float: left;
                        color: #666;
                        width: 6px;
                        text-align: center;
                        padding: 8px;
                    }

                    input {
                        border: 1px solid #ddd;
                        width: 40px;
                        height: 32px;
                        float: left;
                        text-align: center;
                        font-size: 14px;
                    }

                    .plus {
                        border: 1px solid #ddd;
                        border-left: 0;
                        float: left;
                        color: #666;
                        width: 6px;
                        text-align: center;
                        padding: 8px;
                    }
                }

                .cart-list-con5 {
                    width: 10%;

                    .sum {
                        font-size: 16px;
                    }
                }

                .cart-list-con6 {
                    width: 13%;

                    a {
                        color: #666;
                    }
                }
            }
        }
    }

    .cart-tool {
        overflow: hidden;
        border: 1px solid #ddd;

        .select-all {
            padding: 10px;
            overflow: hidden;
            float: left;

            span {
                vertical-align: middle;
            }

            input {
                vertical-align: middle;
            }
        }

        .option {
            padding: 10px;
            overflow: hidden;
            float: left;

            a {
                float: left;
                padding: 0 10px;
                color: #666;
            }
        }

        .money-box {
            float: right;

            .chosed {
                line-height: 26px;
                float: left;
                padding: 0 10px;
            }

            .sumprice {
                width: 200px;
                line-height: 22px;
                float: left;
                padding: 0 10px;

                .summoney {
                    color: #c81623;
                    font-size: 16px;
                }
            }

            .sumbtn {
                float: right;

                a {
                    display: block;
                    position: relative;
                    width: 96px;
                    height: 52px;
                    line-height: 52px;
                    color: #fff;
                    text-align: center;
                    font-size: 18px;
                    font-family: "Microsoft YaHei";
                    background: #e1251b;
                    overflow: hidden;
                }
            }
        }
    }
}
</style>
